<template>
  <ScrollWrapper>
    <div class="container">
      <div class="container-content">
        <!-- 页面头部 -->
        <div class="header">
          <h2 class="title"></h2>
          <div class="actions">
            <a-button class="sync-btn" @click="handleSync">同步</a-button>
            <a-button type="primary" class="add-btn" @click="handleAdd">添加</a-button>
          </div>
        </div>

        <!-- 数据表格 -->
        <div class="table-container">
          <a-table
              :columns="columns"
              :data-source="dataSource"
              :pagination="false"
              :scroll="{ x: 1200 }"
              class="department-table"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'name'">
                <div style="display: flex;align-items: center">
                  <img :src="record.header" alt="" style="width: 30px;height: 30px;border-radius: 50%;">
                  <div style="margin-left: 8px;font-weight: 500">{{ record.name }}</div>
                </div>
              </template>
              <template v-else-if="column.key === 'status'">
                <div  class="tag" :style="tag(record.status, true)">{{ tag(record.status) }}</div>
              </template>
            </template>
          </a-table>
        </div>

        <!-- 分页 -->
        <div class="pagination-container">
          <a-pagination
              v-model:current="currentPage"
              v-model:page-size="pageSize"
              :total="total"
              :show-size-changer="false"
              :show-quick-jumper="false"
              @change="handlePageChange"
          />
        </div>
      </div>
    </div>
  </ScrollWrapper>
</template>

<script>
import ScrollWrapper from "@/components/ScrollWrapper/ScrollWrapper.vue";
import {message} from 'ant-design-vue';
import headerImg from "@/assets/img/avatar.jpg"

export default {
  name: "UserManage",
  components: {
    ScrollWrapper,
    headerImg
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 40,
      columns: [
        {
          title: '用户名',
          dataIndex: 'name',
          key: 'name',
          align: 'center',
        },
        {
          title: '部门名称',
          dataIndex: 'departmentName',
          key: 'departmentName',
          align: 'center'
        },
        {
          title: '直属领导',
          dataIndex: 'manager',
          key: 'manager',
          align: 'center'
        },
        {
          title: '岗位级别',
          dataIndex: 'level',
          key: 'level',
          align: 'center'
        },
        {
          title: '模板描述',
          dataIndex: 'temp',
          key: 'temp',
          align: 'center'
        },
        {
          title: '入职日期',
          key: 'time',
          dataIndex: 'time',
          align: 'center'
        }, {
          title: "企业邮箱",
          key: "email",
          dataIndex: 'email',
        },
        {
          title: "手机号码",
          key: "phone",
          dataIndex: 'phone',
        },
        {
          title: "状态",
          key: "status",
          dataIndex: 'status',
        }
      ],
      dataSource: [
        {
          key: '1',
          name: "Alex",
          header: headerImg,
          departmentName: '财务部',
          manager: 'Annie',
          level: "初级销售专员",
          status: 1,
          time: '2025-07-12 12:00:01',
          temp: "P0",
          email: "alex@vantidebamboo.com",
          phone: "18888888888"
        },
        {
          key: '2',
          name: "Alex",
          header: headerImg,
          departmentName: '财务部',
          manager: 'Annie',
          level: "初级销售专员",
          status: 2,
          time: '2025-07-12 12:00:01',
          temp: "P0",
          email: "alex@vantidebamboo.com",
          phone: "18888888888"
        },
        {
          key: '3',
          name: "Alex",
          header: headerImg,
          departmentName: '财务部',
          manager: 'Annie',
          level: "初级销售专员",
          status: 3,
          time: '2025-07-12 12:00:01',
          temp: "P0",
          email: "alex@vantidebamboo.com",
          phone: "18888888888"
        },
        {
          key: '3',
          name: "Alex",
          header: headerImg,
          departmentName: '财务部',
          manager: 'Annie',
          level: "初级销售专员",
          status: 4,
          time: '2025-07-12 12:00:01',
          temp: "P0",
          email: "alex@vantidebamboo.com",
          phone: "18888888888"
        },
        {
          key: '3',
          name: "Alex",
          header: headerImg,
          departmentName: '财务部',
          manager: 'Annie',
          level: "初级销售专员",
          status: 5,
          time: '2025-07-12 12:00:01',
          temp: "P0",
          email: "alex@vantidebamboo.com",
          phone: "18888888888"
        }
      ]
    }
  },
  methods: {
    tag(status, color) {
      let map = {
        1: {
          name: "在职",
          color: {
            color:"#346b46",
            background:"#b1cb49"
          }
        },
        2: {
          name: "已离职",
          color: {
            color:"#fff",
            background:"#898989"
          }
        },
        3: {
          name: "未入职",
          color: {
            color:"#ec8d40",
            background:"#f5ce97"
          }
        },
        4: {
          name: "未启用",
          color: {
            color:"#6e6e6e",
            background:"#d6d6d6"
          }
        },
        5: {
          name: "禁用",
          color: {
            color:"#e8534e",
            background:"#ec93a3"
          }
        },
      }
      if(color){
        return map[status].color
      }else{
        return map[status].name
      }
    },
    handleSync() {
      message.success('同步成功');
    },
    handleAdd() {
      message.info('添加部门');
    },
    handleViewDetail(record) {
      message.info(`查看 ${record.departmentName} 详情`);
    },
    handleToggleStatus(record) {
      const newStatus = record.status === '正常' ? '作废' : '正常';
      record.status = newStatus;
      message.success(`${record.departmentName} 已${newStatus}`);
    },
    handlePageChange(page) {
      this.currentPage = page;
      message.info(`切换到第 ${page} 页`);
    }
  }
}
</script>

<style scoped lang="scss">
.tag{
  width: 50px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 10px;
}
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0px 20px 24px 0;
  box-sizing: border-box;
}

.container-content {
  background-color: #fff;
  display: flex;
  margin-top: 20px;
  flex-direction: column;
  border-radius: 30px;
  flex: 1;
  padding: 24px 0;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;

  .title {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin: 0;
  }

  .actions {
    display: flex;
    gap: 12px;
    margin: 0 30px;

    .sync-btn {
      color: #3a7c5a;
      font-weight: 400;
      border-radius: 6px;
      width: 110px;
      border-color: #3a7c5a;

      &:hover {
        opacity: 0.6;
      }
    }

    .add-btn {
      background-color: #3a7c5a;
      border-radius: 6px;
      width: 110px;

      &:hover {
        opacity: 0.6;
      }
    }
  }
}

.table-container {
  flex: 1;
  margin-bottom: 24px;

  :deep(.department-table) {
    .ant-table-thead > tr > th {
      background-color: #fff;
      font-weight: 500;
      color: #666;
      border-bottom: 1px solid #f0f0f0;
      padding: 16px 8px;
    }

    .ant-table-tbody > tr > td {
      padding: 16px 8px;
      border-bottom: 1px solid #f0f0f0;
      color: #333;
    }

    .ant-table-tbody > tr:hover > td {
      background-color: #f5f5f5;
    }

    .ant-table-cell:before {
      width: 0 !important;
    }

    .ant-table-thead > tr > .ant-table-cell {
      color: #d9d9d9;
    }
  }

  .action-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;

    .detail-btn {
      background-color: #fff;
      border: 1px solid #3a7c5a;
      color: #3a7c5a;
      border-radius: 4px;
      font-size: 12px;
      width: 80px;

      &:hover {
        opacity: 0.6;
      }
    }

    .enable-btn {
      background-color: #3a7c5a;
      color: #fff;
      border-radius: 4px;
      font-size: 12px;
      width: 80px;

      &:hover {
        opacity: 0.6;
      }
    }

    .disable-btn {
      background-color: #ff4d4f;
      border-color: #ff4d4f;
      color: #fff;
      border-radius: 4px;
      font-size: 12px;
      width: 80px;

      &:hover {
        background-color: #ff7875;
        border-color: #ff7875;
      }
    }
  }
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;

  :deep(.ant-pagination) {
    .ant-pagination-item {
      border-radius: 4px;

      &.ant-pagination-item-active {
        background-color: #3a7c5a;
        border-color: #3a7c5a;

        a {
          color: #fff;
        }
      }
    }

    .ant-pagination-prev,
    .ant-pagination-next {
      border-radius: 4px;

      &:hover {
        border-color: #3a7c5a;
        color: #3a7c5a;
      }
    }
  }
}

:deep(.ant-tag) {
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 12px;

  &.ant-tag-green {
    background-color: #f6ffed;
    border-color: #b7eb8f;
    color: #52c41a;
  }

  &.ant-tag-orange {
    background-color: #fff7e6;
    border-color: #ffd591;
    color: #fa8c16;
  }
}
</style>